<template>
	<div class="main-area center">
		<van-row type="flex" justify="space-around">
			<van-col span="6" @click.native="goTabPage('news')">
				<van-icon class="iconfont iocn-1" class-prefix="icon" name="quanbuxinwen" />
				<p class="main-item-name">
					协会新闻
				</p>
			</van-col>
			<van-col span="6" @click.native="goTabPage('course',)">
				<van-icon class="iconfont iocn-2" class-prefix="icon" name="huodong1" />
				<p class="main-item-name">
					会议活动
				</p>
			</van-col>
			<van-col span="6" @click.native="goTabPage('course',)">
				<van-icon class="iconfont iocn-3" class-prefix="icon" name="danweizuzhi" />
				<p class="main-item-name">
					会员单位
				</p>
			</van-col>
			<van-col span="6" @click.native="goTabPage('course',)">
				<van-icon class="iconfont iocn-3" class-prefix="icon" name="shenqing1" />
				<p class="main-item-name">
					服务申请
				</p>
			</van-col>
			<van-col span="6" @click.native="goTabPage('my')">
				<van-icon class="iconfont iocn-4" class-prefix="icon" name="shouye" />
				<p class="main-item-name">
					会员中心
				</p>
			</van-col>
		</van-row>
	</div>
</template>

<script>
	export default {
		name: 'mainArea',
	}
</script>

<style lang="less" scoped="scoped">
	@import '../../../style/base.less';

	.main-area{
		margin-top: -.2rem;
		padding-bottom: .2rem;
		.van-col{
			text-align: center;
			.iconfont{
				width: .8rem;
				height: .8rem;
				line-height: .8rem;
				display: inline-block;
				font-size: .5rem;
				border-radius: 50%;
				color: #fff;
				margin-bottom: .14rem;
			}
			.iocn-1{
				background-color: #8a90fa;
			}
			.iocn-2{
				background-color: #fd9d21;
			}
			.iocn-3{
				background-color: #00C8B7;
			}
			.iocn-4{
				background-color: #4dc6ee;
			}
			.main-item-name{
				line-height: .4rem;
				font-size: .24rem;
				color: @title-color;
			}
		}
	}
</style>
